<template>
  <n-modal v-model:show="isShow">
    <n-card
      style="width: 600px"
      title="更改个人信息"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra>
        <n-icon
        style="cursor: pointer;"
        :component="CloseOutline"
        size="22"
        @click="emits('closeModal')
        "/>
      </template>
      <div style="font-size: 18px;font-weight: 700;margin-bottom: 10px;">昵称</div>
      <n-input v-model:value="username" placeholder="请输入"></n-input>
      <n-divider></n-divider>

      <div style="font-size: 18px;font-weight: 700;margin-bottom: 10px;">上传头像</div>
      <uploadImg @changeImageList="changeImageList" :max="1"></uploadImg>
      <n-divider></n-divider>

      <div style="font-size: 18px;font-weight: 700;margin-bottom: 10px;">选择性别</div>
      <n-select v-model:value="sexValue" :options="sexOptions" />
      <n-divider></n-divider>

      <div style="font-size: 18px;font-weight: 700;margin-bottom: 10px;">个性签名</div>
      
      <n-input v-model:value="userSign" type="textarea" placeholder="请输入" show-count
      :autosize="{
        minRows: 3,
      }"
      >
        <template #count="{ value }">
          {{ value.length }}
        </template>
      </n-input>
      
      <template #footer>
        <div>
          <n-button type="success" style="float: right;margin-left: 15px;" @click="update">
            确定更改
          </n-button>
          <n-button type="tertiary" style="float: right;" @click="emits('closeModal')">
            取 消
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang='ts'>
import { CloseOutline } from '@vicons/ionicons5'
import uploadImg from "./uploadImg.vue"
import { UploadFileInfo } from 'naive-ui'
import {UpdateUserMess, GetUserMess} from "../api/user"
import {ref, onMounted, watch} from "vue"
import { useRouter } from "vue-router";
const router = useRouter()

const props = defineProps<{
  updateUserModal: boolean
}>()

const emits = defineEmits(['closeModal'])

const userSign = ref("")
const sexValue = ref("男")
const avatar = ref("")
const username = ref("")
const user_avatar = ref("")
const isShow = ref(false)
const sexOptions = ref([
  {
    label: '男',
    value: '男'
  },
  {
    label: '女',
    value: '女'
  },
])

// 更新个人信息
const update = async() => {
  const phone = localStorage.getItem("token") || ""
  if(avatar.value == ""){
    avatar.value = localStorage.getItem("avatar") as string
  }
  const res = await UpdateUserMess({
    phone,
    sex: sexValue.value,
    avatar: avatar.value,
    sign: userSign.value,
    username: username.value
  })
  if(res.code!="200"){
    window.$message.warning(res.message)
  }else{
    window.$message.success("修改成功！")
    emits("closeModal")
    localStorage.setItem("avatar", avatar.value)
    localStorage.setItem("username", username.value)
    router.go(0)
  }
}

const changeImageList = (imageList:UploadFileInfo[]) => {
  if(imageList[0]){
    avatar.value = imageList[0].url || ""
  }
}

onMounted(async() => {
  const phone = localStorage.getItem("token") || ""
  const user_res = await GetUserMess(phone)
  if(user_res.code!="200"){
    window.$message.warning(user_res.message)
  }else{
    userSign.value = user_res.data.sign
    sexValue.value = user_res.data.sex
    username.value = user_res.data.username
    user_avatar.value = user_res.data.avatar
    localStorage.setItem("avatar", user_res.data.avatar)
    localStorage.setItem("username", user_res.data.username)
  }
})

watch(() => props.updateUserModal, (newValue:boolean) => {
  isShow.value = newValue
})

</script>

<style lang='scss' scoped>
  
</style>